<template>
  <div :style="bottomStaySpace()" class="wrap">
    <div class="info">
      <div class="item flex_sb_cen">
        <div class="item_1">
          <span class="title">顾客姓名：</span>
          <span class="text">
            {{ customerInfo.name }}
            <Icon :name="customerInfo.sex === '女' ? 'icon-nv' : 'icon-nan'" size="20" />
          </span>
        </div>
        <div class="item_2">
          <span class="title title1">意向项目：</span>
          <span class="text">{{ customerInfo.projectType }}</span>
        </div>
      </div>
      <div class="item flex_sb_cen">
        <div class="item_1">
          <span class="title">联系方式：</span>
          <span class="text">{{ customerInfo.mobile }}</span>
        </div>
        <div class="item_2">
          <span class="title title1">结识途径：</span>
          <span class="text">{{ customerInfo.knowWays }}</span>
        </div>
      </div>
      <div class="item flex_sb_start">
        <div class="item_1">
          <span class="title">结识日期：</span>
          <span class="text">{{ customerInfo.knowTime }}</span>
        </div>
        <div class="item_2 flex_start">
          <span class="title title1">报单时间：</span>
          <span class="text">{{ customerInfo.commitTime }}</span>
        </div>
      </div>
    </div>
    <div class="follow">
      <div class="title2">跟进记录</div>
      <div v-if="stepList.length > 0" class="step_list">
        <up-steps current="0" direction="column" dot>
          <up-steps-item v-for="item in stepList" :key="item.id" @tap="Router.push('follow_records', {id: item.id})">
            <template #desc>
              <div class="ml20">
                <div class="flex_sb_start">
                  <div class="step_title flex1">
                    {{ item.wayName }} |
                    <span v-for="(wayName, index) in item.wayDetailName" :key="index">{{ wayName }}{{ index < item.wayDetailName?.length - 1 ? ' | ' : '' }}</span>
                  </div>
                  <div :class="['step_status', item.status === 0 ? 'pass' : 'reject']">{{ item.status === 0 ? '审核通过' : '驳回' }}</div>
                </div>
                <div class="desc mt20">
                  <Icon name="icon-shijian1" size="22" />
                  <span class="ml10">{{ item.serviceTime }}</span>
                </div>
                <div class="uploadTip">
                  <Icon name="icon-dingwei1" size="24" />
                  <span class="ml10">{{ item.province }}-{{ item.city }}-{{ item.district }}</span>
                </div>
              </div>
            </template>
          </up-steps-item>
        </up-steps>
      </div>
      <div v-else class="no_record">
        <Image height="144" name="no_record" oss width="140" />
        <div class="no_record_text">暂无记录</div>
      </div>
    </div>
    <div :style="keepBottomSafeDis()" class="suction_bottom_btn">
      <Button size="L" @confirm="Router.redirect('add_follow_records', {customerInfo: JSON.stringify(customerInfo), wayText: 'add'})">新增跟进</Button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Button from '@C/Button.vue'
import { keepBottomSafeDis, Router, bottomStaySpace, storeState, onShow } from '@U/common'
import { ref } from 'vue'
import dayjs from 'dayjs'
import { MsgLoading, MsgLoadingClear } from '@C/Msg'
import Icon from '@C/Icon.vue'
import Image from '@C/Image.vue'
import { getCustomerInfo, getFollowRecordsStepList } from './request'

const customerInfo = ref({})
const getCustomerInfoFn = async () => {
  const { data, code } = await getCustomerInfo({ customerId: storeState.tempData.customerId }).finally(() => {})
  if (code === 200) {
    data.knowTime = dayjs(data.knowTime).format('YYYY-MM-DD')
    customerInfo.value = data
  }
}
const stepList = ref([])
const getFollowRecordsStepListFn = async () => {
  const { code, data } = await getFollowRecordsStepList({ customerId: storeState.tempData.customerId }).finally(() => {})
  if (code === 200) {
    stepList.value = data
  }
}
onShow(async () => {
  await MsgLoading()
  await getCustomerInfoFn()
  await getFollowRecordsStepListFn()
  MsgLoadingClear()
})
</script>

<style lang="less" scoped>
.wrap {
  .info {
    margin-top: 2rpx;
    padding: 24rpx 44rpx 28rpx 48rpx;
    background-color: #fff;
    .item {
      margin-bottom: 26rpx;
      &:last-child {
        margin-bottom: 0;
      }
      .item_1 {
        width: 52%;
      }
      .item_2 {
        width: 48%;
      }
      .title {
        display: inline-block;
        width: 140rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0,0,0,0.45);
        line-height: 40rpx;
      }
      .title1 {
        text-align: right;
      }
      .text {
        display: inline-block;
        width: 174rpx;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 40rpx;
        color: rgba(0,0,0,0.85);
      }
    }
  }
  .follow {
    padding: 24rpx;
    .title2 {
      font-weight: 500;
      font-size: 32rpx;
      color: rgba(0,0,0,0.85);
      line-height: 44rpx;
      margin-bottom: 24rpx;
      margin-left: 24rpx;
    }
    .step_list {
      padding: 20rpx;
      border-radius: 24rpx;
      background-color: #fff;
    }
    .no_record {
      text-align: center;
      padding-top: 80rpx;
      .no_record_text {
        font-weight: 400;
        font-size: 28rpx;
        color: #8C8C8C;
        line-height: 40rpx;
      }
    }
    .step_title {
      font-weight: 400;
      font-size: 32rpx;
      color: rgba(0,0,0,0.85);
      line-height: 44rpx;
    }
    .step_status {
      width: 130rpx;
      text-align: right;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 34rpx;
    }
    .pass {
      color: #2DC76D;
    }
    .reject {
      color: #FF8002;
    }
    .desc {
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0,0,0,0.45);
      line-height: 40rpx;
    }
    .uploadTip {
      margin: 8rpx 0 64rpx;
    }
  }
}
</style>
